import { StyleSheet, Text, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import Home from './Home'
import Market from './Market'
import Message from './Message'
import Mine from './Mine'
import Cart from './Cart'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import AntDesignIcon from 'react-native-vector-icons/AntDesign'
import { connect } from 'react-redux'

const Tab = createBottomTabNavigator();

const Index = ({ navigation, route, tabBarBadge }) => {
  const defaultRoute = route?.params?.initialRouteName || 'Home'
  const to = (name) => {
    navigation.navigate(name)
  }
  
  const tabBarStyle = {
    Home: {

    },
    Market: {
      
    }
  }
  return (
    <Tab.Navigator
      initialRouteName={defaultRoute}
      screenOptions={({ route }) => ({
        // headerShown: false,
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === 'Home') {
            iconName = focused
              ? 'home'
              : 'home-outline';
          } else if (route.name === 'Market') {
            iconName = focused ? 'ios-newspaper' : 'ios-newspaper-outline';
          } else if(route.name === 'Message') {
            iconName = focused ? 'chatbubble-ellipses-sharp' : 'chatbubble-ellipses-outline';
          } else if(route.name === 'Cart') {
            iconName = focused ? 'cart' : 'cart-outline';
          } else if(route.name === 'Mine') {
            iconName = focused ? 'settings' : 'settings-outline';
          }
          // You can return any component that you like here!
          // console.log('size', size)
          return <Ionicons name={iconName} size={focused ? 32 : 20} color={color} />;
        },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
        // tabBarActiveBackgroundColor: 'orange',
        // tabBarInactiveBackgroundColor: 'blue'
      })}
    >
      <Tab.Screen name="Home" component={Home} options={{
        title: '首页',
        headerShown: false
      }} />
      <Tab.Screen name="Market" component={Market} options={{
        title: '动态' ,
        headerRight: () => (
          <AntDesignIcon name='pluscircleo' size={22} style={{marginRight: 10}} 
            onPress={() => to('Publish')}
          />
        )
      }} />
      <Tab.Screen name="Message" component={Message} options={{ 
        title: '消息',
        tabBarBadge: tabBarBadge|| null
       }} />
       <Tab.Screen name="Cart" component={Cart} options={{ 
        title: '收藏'
       }} />
      <Tab.Screen name="Mine" component={Mine} options={{ 
        title: '我的'
       }} />
      {/* <Tab.Screen name="Test" component={Test} /> */}
    </Tab.Navigator>
  )
}

export default connect((state)=>{
  return {
    tabBarBadge: state.chatReducer.tabBarBadge
  }
})(Index)

const styles = StyleSheet.create({

})